<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定</title>
    <script src="/javascripts/vue@3.0.11.js" ></script>
</head>
<body>

    <div id="first">
        <!-- 使用 v-bind 可以为 HTML 元素绑定属性 -->
        <input v-bind:type="inputType" v-bind:value="inputValue" v-bind:style="inputStyle">
        <hr>
        <!-- 使用 v-bind:attribute 绑定属性值时可以缩写为 :attribute -->
        <input :type="inputType" :value="inputValue" :style="inputStyle">
    </div>

    <a href="/index.html">返回首页</a>

    <script>
        let options = {
            data(){
                return {
                    inputType: 'button',
                    inputValue: '你点一个试试',
                    inputStyle: 'border:1px solid blue ; color:red;'
                }
            }
        }

        const app = Vue.createApp( options );
        app.mount( '#first' );
    </script>

</body>
</html>